<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>布局</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0
        }
        .top{
            height: 100px;
            background: blue;
        }
        .main {
            width: 800px;
            height: 300px;
            background: #cccccc;
            margin: 0 auto
        }
        .foot{
            width: 800px;
            height: 100px;
            background: #900;
            margin:0 auto
        }
    </style>
</head>
<body>
<!--
大家看，这个布局就跟咱们刚才看的新浪布局是非常相似的。新浪底部也是固定宽度的，然后中间部分是它的主体部分，顶部是一个横向通栏的，自适应宽度的。
那么，咱们这个例子只不过是把中间的部分固定了高度，真正做开发的时候咱们把这个高度做成一个自动的，随着里面的内容不断地把它撑开。
这就是单列布局。
-->
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
</body>
</html>